<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="utf-8">
	<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>图书在线首页</title>

	<!-- 引入Bootstrap核心样式文件 -->
	<link href="${pageContext.request.contextPath}/static/front/css/bootstrap.css" rel="stylesheet">

	<!-- 引入jQuery核心js文件 -->
	<script src="${pageContext.request.contextPath}/static/front/js/jquery-1.11.3.min.js"></script>
	<!-- 引入BootStrap核心js文件 -->
	<script src="${pageContext.request.contextPath}/static/front/js/bootstrap.min.js"></script>

	<script src="${pageContext.request.contextPath}/static/back/lib/layui/layui.js" charset="utf-8"></script>
	<link href="${pageContext.request.contextPath}/static/back/lib/layui/css/layui.css" rel="stylesheet">

	<style>

		.glyphicon-book {
			font-size: 9pt;
		}

		.div1 a {
			color: royalblue;
		}

		#forYou img:hover {
			transform: scale(1.2, 1.2);
			transition: transform 0.2s;
		}

		#bookinfo a:hover {
			color: #00C29A;
		}
		#lal a{
			color: black;
		}
		#lal a:hover{
			color: #00C29A;
		}
		#bookinfo a {
			text-decoration: none;
			color: black;
		}

		#bookinfo {
			margin-left: 15px;
			margin-top: 10px;
		}

		#bookinfo div {
			padding-top: 10px
		}

		#bookbuy {
			margin-top: 30px;
		}

		#bookbuy a {
			width: 100px;
		}

		#de a {
			text-decoration: none;
			color: grey;
		}

		#de a:hover {
			opacity: 0.7;
		}
	</style>
	</head>
<body>
<!-- 头部页面 -->
<jsp:include page="header.jsp"/>

<!-- 主体部分 -->
<!--书籍详情-->
<div  class="container" style="margin-top: 30px;">
	<div class="col-lg-4 col-md-4" style="margin-left: -30px;">
		<div  class="col-md-12">
<<<<<<< HEAD
			<img src="${pageContext.request.contextPath}/${book.img}" style="width: 300px;height:200px;border: 1.5px solid darkgray;" />
=======
			<img src="${book.img}" style="width: 300px;height:200px;border: 1.5px solid darkgray;" />
>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
		</div>
	</div>
	<div  class="col-lg-8 col-md-8" style="margin-left: 30px;">
		<div  class="row">
			<p style="font-family: 'arial black' ;font-size: 23px;">${book.bookName}</p>
			<p style="color: gray;">洋里怪气的模样，那屈辱的轻伤，谁能给我发个奖章...</p>
		</div>
		<div  class="row" style="background: #F5F5F5;padding: 10px;">
			<div  class="row" style="padding: 5px;">
				<div  class="col-lg-5 col-md-5 col-sm-5">
					<span style="font-size:14px;">售&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:</span>
					<span style="color: red;font-size: 12px;">￥</span>
					<span style="color: red;font-size: 23px;">${book.price}</span>
				</div>
				<div  class="col-lg-7 col-md-7 col-sm-7">
					<span style="font-size:14px;tex: center;line-height: 33px;">100</span><span style="font-size:14px;line-height: 33px;">人评论</span> &nbsp;&nbsp;&nbsp;&nbsp;
					<span class="glyphicon glyphicon-star" style="font-size: 13px;color: #FEBC05;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 13px;color: #FEBC05;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 13px;color: #FEBC05;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 13px;color: #FEBC05;"></span>
					<span class="glyphicon glyphicon-star" style="font-size: 13px;color: #FEBC05;"></span>
				</div>
			</div>
			<div id="lal" class="row" style="padding: 5px;">
				<div  class="col-lg-5 col-md-5 col-sm-5">
					<span style="font-size:14px;">纸质售价:</span>
					<span style="color: black;font-size: 12px;">￥</span>
					<span style="font-size: 14px;">24.00</span>
					<a href="#" style="padding-left: 5px;font-size: 14px;">购买纸书</a>
				</div>
			</div>
		</div>
		<div id="bookinfo" class="row">
			<div  class="row">
				<span style="font-size:14px;">作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者:</span>
				<a style="font-size:14px;">${book.author}</a>
			</div>
			<div  class="row">
				<span style="font-size:14px;">出&nbsp;&nbsp;版&nbsp;社:</span>
				<a style="font-size:14px;">${book.publisher}</a>
			</div>
			<div  class="row">
				<span style="font-size:14px;">出版时间:</span>
				<span style="font-size:14px;"><fmt:formatDate value="${book.publishTime}" pattern="yyyy-MM-dd"/></span>
			</div>
			<div  class="row">
				<span style="font-size:14px;">字&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数:</span>
				<span style="font-size:14px;">14.8万</span>
			</div>
			<div  class="row">
				<span style="font-size:14px;">所属分类:</span>
				<a style="font-size:14px;">${book.bookCategory.categoryName}</a>
			</div>
		</div>
		<div id="bookbuy" class="row">
			<div  class="col-lg-2 col-md-2 col-sm-2">
				<a href="javascript:void(0)" onclick="addCart()" class="btn btn-success">加入购物车</a>
			</div>
			<div  class="col-lg-2 col-md-2 col-sm-2">
				<a href="#" class="btn btn-danger">立即购买</a>
			</div>
			<div  class="col-lg-2 col-md-2 col-sm-2">
				<a href="javascript:void(0)" onclick="goCart()" class="btn btn-default">去购物车</a>
			</div>
		</div>
		<div  style="padding-top: 10px;">
			<hr style="border:1px dotted;" />
		</div>
		<div >
			<div  class="col-lg-2 col-md-2 col-sm-2" style="margin-left: -10px;margin-top:15px;font-size: 14px;">
				<span >支持设备:</span>
			</div>
			<div id="de" class="col-lg-9 col-md-9 col-sm-9" style="margin-left: -30px;">
				<div  class="col-lg-2 col-md-2 col-sm-2">
					<a href="#"><img src="${pageContext.request.contextPath}/static/front/img/iPad.png" />
						<br />
						<span style="margin-left: -5px;font-size: 13px;">iPad</span></a>
				</div>
				<div  class="col-lg-2 col-md-2 col-sm-2">
					<a href="#"><img src="${pageContext.request.contextPath}/static/front/img/line_pc.png" />
						<br />
						<span style="margin-left: -12px;font-size: 13px;">PC在线</span></a>
				</div>
				<div  class="col-lg-2 col-md-2 col-sm-2">
					<a href="#"><img src="${pageContext.request.contextPath}/static/front/img/touch_screen.png" />
						<br />
						<span style="margin-left: -12px;font-size: 13px;">触屏版</span></a>
				</div>
				<div  class="col-lg-2 col-md-2 col-sm-2">
					<a href="#"><img src="${pageContext.request.contextPath}/static/front/img/reader.png" />
						<br />
						<span style="margin-left: -17px;font-size: 13px;">当当阅读</span></a>
				</div>
				<div  class="col-lg-2 col-md-2 col-sm-2">
					<a href="#"><img src="${pageContext.request.contextPath}/static/front/img/andriod.png" />
						<br />
						<span style="margin-left: -10px;font-size: 13px;"> android </span></a>
				</div>
				<div  class="col-lg-2 col-md-2 col-sm-2">
					<a href="#"><img src="${pageContext.request.contextPath}/static/front/img/iphone.png" />
						<br />
						<span style="margin-left: -10px;font-size: 13px;">iphone</span></a>
				</div>
			</div>
		</div>
	</div>

</div>
<!--目录-->
<div class="container" style="margin-top: 40px;">
	<div>
		<ul class="nav nav-tabs">
			<li role="presentation" class="active">
				<a href="#intro">图书简介</a>
			</li>
			<li role="presentation">
				<a href="#content">目录</a>
			</li>
		</ul>
	</div>
	<div style="height: 20px;"></div>
	<div id="intro">
		<p>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			简单点说话的方式简单点,递进的情绪请省略,你又不是个演员 别设计那些情节,
			没意见我只想看看你怎么圆 你难过的太表面 像没天赋的演员,观众一眼能看见
		</p>
	</div>
	<div style="height: 20px;"></div>
</div>


<!--页脚-->
<div class="container" style="margin-top: 10px;">
	<div class="row">
		<div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px;">
			<img src="${pageContext.request.contextPath}/static/front/img/footer.jpg" style="width: 98%;"/>
		</div>
	</div>
</div>
<hr />

<!--友情链接和版权信息-->
<div class="container" style="margin-top: 10px;">
	<div class="row">
		<div class="" align="center">
			<ul class="list-inline">
				<li><a>关于我们</a></li>
				<li><a>联系我们</a></li>
				<li><a>招贤纳士</a></li>
				<li><a>法律声明</a></li>
				<li><a>友情链接</a></li>
				<li><a>支付方式</a></li>
				<li><a>配送方式</a></li>
				<li><a>服务声明</a></li>
				<li><a>广告声明</a></li>
			</ul>
		</div>
		<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
			Copyright &copy; 2003-2017 书城 版权所有
		</div>
	</div>
</div>
<script>
	var layer;
	layui.use('layer', function(){
		layer = layui.layer;
	});
	function goCart() {
		if('${user.username}' == ''){
			layer.msg("请先登录!");
			return;
		}
		location.href = '${pageContext.request.contextPath}/front/cartview';
	}
	function addCart() {
<<<<<<< HEAD
=======

>>>>>>> 180ace60693232df69575b4f82fc34aeb3fc90e8
		if('${user.username}' == ''){
			layer.msg("请先登录!");
			return;
		}
		$.ajax({
			url:'${pageContext.request.contextPath}/front/addcart',
			data:{'userId':'${user.id}',"bookId":'${book.id}',"numb":1,"total":'${book.price}'},
			dataType:'JSON',
			type:'POST',
			success:function (res) {
				layer.msg(res.message);
			}
		})
	}
</script>
</body>

</html>